<template>
  <div class="ChildPage TablePage">
    <vb-table :option="option" ref="table"
               @row-del="rowDel"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @on-load="getList">
      <template #table-selection="scope">
        <el-table-column width="50" align="center" type="selection" :selectable="canSelect"></el-table-column>
      </template>
      <template #table-name="scope">
        {{ scope.row.name }}
        <el-tag type="success" v-if="scope.row.isAdmin" size="mini">管理员</el-tag>
      </template>
    </vb-table>
    <PowerDialog ref="powerDialog" v-on:reload="$refs.table.reload()"></PowerDialog>
  </div>
</template>

<script>

import PowerDialog from "../components/dialog/PowerDialog.vue"
export default {
  mixins: [],
  components: {
    PowerDialog
  },
  data() {
    let self = this
    return {
      option: {
        selection: true,
        index: true,
        menuWidth: 200,
        column: [
          {
            label: "角色名称",
            prop: "name",
            search: {
              show: true,
              label: "关键词",
              prop: "keyword",
              hiddenLabel: true,
              placeholder: "\ue605 角色名称/编号/备注"
            },
            form: {
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入角色名称",
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "角色编号",
            prop: 'key',
            form: {
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入角色编号",
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "角色排序",
            prop: "sort",
            type: "inputNumber",
            width: 80,
            align: "center",
            form: {
              default: 1,
              span: 24,
              rules: [
                {
                  required: true,
                  message: "请输入角色排序",
                  trigger: "click"
                }
              ],
            },
          },
          {
            label: "管理员",
            prop: 'isAdmin',
            type: "switch",
            width: 80,
            tableShow: false,
            form: {
              default: false,
              rules: [
                {
                  required: true,
                  message: "请输入角色排序",
                  trigger: "click"
                }
              ],
              vIf: () => {
                return this._userInfo.isSuperRole
              },
            }
          },
          {
            label: "角色备注",
            prop: 'remark',
            type: "textarea",
            form: {
              span: 24,
            }
          }
        ],
        form: {
          width: 400
        },
        handleBtnList: [
          {
            key: "edit",
            vIf: (item) => {
              return (!item.isSuperRole && !item.isAdmin) || (item.isAdmin && this._userInfo.isSuperRole)
            },
          },
          {
            key: "delete",
            vIf: (item) => {
              return (!item.isSuperRole && !item.isAdmin) || (item.isAdmin && this._userInfo.isSuperRole)
            },
          },
          {
            label: "编辑权限",
            icon: "el-icon-key",
            type: "text",
            vIf: (item) => {
              return (!item.isSuperRole && !item.isAdmin) || (item.isAdmin && this._userInfo.isSuperRole)
            },
            callback: function (row) {
              self.editPower(row)
            }
          },
        ],
      }
    }
  },
  computed: {},
  async mounted() {
  },
  methods: {
    /**
     * 查询数据列表信息
     * @param page
     * @param size
     * @param search 检索条件
     * @param done
     */
    getList(page, size, search, done) {
      this.$api.getCharacterList(Object.assign({
        pageIndex: page,
        pageSize: size
      }, search)).then(res => {
        done(res)
      })
    },

    /**
     * 新增数据处理
     * @param form
     * @param done
     */
    rowSave(form, done) {
      this.$api.addCharacter(form).then((res) => {
        done(res)
      })
    },

    /**
     * 更新数据处理
     * @param form
     * @param done
     */
    rowUpdate(form, done) {
      this.$api.updateCharacter(form).then((res) => {
        done(res)
      })
    },

    /**
     * 删除数据处理
     * @param ids
     * @param done
     */
    rowDel(ids, done) {
      this.$api.deleteCharacter({
        ids: ids
      }).then((res) => {
        done(res)
      })
    },

    /**
     * 编辑权限
     * @param row
     */
    editPower(row) {
      this.$refs.powerDialog.open(row)
    },

    /**
     * 是否可被选
     * @param row
     */
    canSelect(row){
      return (!row.isSuperRole && !row.isAdmin) || (row.isAdmin && this._userInfo.isSuperRole)
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
</style>
